<template>
  <div class="article-item">
    <!-- 文章标题 -->
    <p class="titile">
      <a href="javascript:;" @click="toDetail">{{
        $emoji.uncodeUtf16(articleData.title)
      }}</a>
    </p>
    <!-- 文章内容 -->
    <div class="article-container">
      <div
        class="article-container-image"
        v-if="articleData.pic_bg ? true : false"
      >
        <a href="javascript:;" @click="toDetail"
          ><img v-lazy="articleData.pic_bg" class="rounded h-100" alt=""
        /></a>
      </div>
      <div class="article-container-text">
        <div class="article-container-text-description">
          {{ $emoji.uncodeUtf16(articleData.description) }}
        </div>
        <div class="article-container-text-bottom">
          <div class="text-bottom-start">
            <div class="text-bottom-agree">
              <i class="iconfont icon-icon"></i>
              <span class="text">{{ articleData.agree }} 赞</span>
            </div>
            <div class="text-bottom-trample">
              <div><i class="iconfont icon-icon"></i></div>
              <span class="text">踩</span>
            </div>
            <div
              class="text-bottom-author"
              @click="$router.push(`/center/${articleData.author_init_id}`)"
            >
              <a href="javascript:;">
                {{ $emoji.uncodeUtf16(articleData.author_name) }}
              </a>
            </div>
          </div>
          <div class="text-bottom-end">
            <ul class="text-bottom-end-box">
              <li v-for="(tag, index) in tagsObjThree" :key="index">
                <i class="iconfont" :class="tag.icon"></i>
              </li>
            </ul>
            <el-popover placement="top-end" width="200" trigger="hover">
              <ul class="inner_ul">
                <li v-for="(tag, index) in computedTagsObj" :key="index">
                  <i class="iconfont" :class="tag.icon"></i>
                </li>
              </ul>
              <div class="flod" slot="reference">
                <a href="javascript:;">...</a>
              </div>
            </el-popover>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyArticle",
  props: {
    articleData: {
      type: Object,
    },
    menu_content: {
      type: Array,
    },
  },
  computed: {
    // 计算所有标签对象
    computedTagsObj() {
      if (this.menu_content.length === 0) return;
      let results = [];
      // 对文章所有标签每一个分类都进行查找
      JSON.parse(this.articleData.tags).forEach((elem) => {
        // 找到的对应分类标签数组
        const tagsArr = this.menu_content.find((item) => {
          if (elem.id === item.id && elem.content.length > 0) {
            return item;
          }
        });

        // 匹配到空的数据，则跳出这次函数
        if (tagsArr === undefined) return;

        // 存储对应的标签
        let tags = [];
        let index = 0;
        do {
          // 数组查找对应一样的id, 把正确的元素压入tags, 如果标签数量不一致, 则继续筛选一遍
          let tag = tagsArr.content.find((item) => {
            if (item.id === elem.content[index]) {
              index++;
              return item;
            }
          });
          tags.push(tag);
        } while (tags.length !== elem.content.length);

        // 将得到的数组和最终数组进行拼接
        results = [...results, ...tags];
      });
      return results;
    },
    // 前三个标签
    tagsObjThree() {
      if (this.menu_content.length === 0) return;
      const result = [];
      for (let i = 0; i < 3; i++) {
        result.push(this.computedTagsObj[i]);
      }
      return result;
    },
  },
  methods: {
    // 跳转到详情页
    toDetail() {
      this.$router.push({
        path: `/community/detail/${this.articleData.article_id}`,
      });
    },
  },
};
</script>

<style lang="less" scoped>
@media screen and (min-width: 1260px) {
  .article-item {
    margin: 0;
  }
}
.el-popover {
  .inner_ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 0 0 0 10px !important;
    list-style-type: none !important;
    li {
      margin: 0 10px 0 0;
    }
    i {
      font-size: 20px;
    }
  }
}
.article-item {
  border-bottom: 1px solid #e1e1e1;
  padding: 20px 0;
  margin: 0 20px;
  ul {
    padding-left: 0;
    list-style-type: none;
  }
  .titile {
    font-size: 22px;
    color: #323232;
    text-align: left;
    margin-bottom: 8px;
    /* 省略号 */
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    a {
      transition: color 0.4s;
      &:hover {
        color: var(--a-button-hover-color);
      }
    }
  }
  .article-container {
    display: flex;
    justify-content: space-between;
    height: 100px;
    .article-container-image {
      max-width: 140px;
      min-width: 140px;
      background: #f6f6f6;
      height: 100px;
      margin-right: 14px;
      overflow: hidden;
      position: relative;
      a {
        position: absolute;
        height: 100%;
        /* 水平垂直居中 */
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .article-container-text {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: auto;
      text-align: left;
      color: #888888;
      .article-container-text-description {
        height: 48px;
        /* 省略号 */
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .article-container-text-bottom {
        display: flex;
        justify-content: space-between;
        .text-bottom-start {
          display: flex;
          width: 250px;
          justify-content: space-between;
          align-items: center;
          & i {
            margin-right: 4px;
            font-size: 18px;
            font-weight: 700;
          }
          .text-bottom-agree {
            cursor: url("@/assets/mouse/x2.cur"), auto !important;
            transition: color 0.4s;
            &:hover {
              color: var(--a-button-hover-color);
            }
          }
          .text-bottom-trample {
            align-items: center;
            display: flex;
            cursor: url("@/assets/mouse/x2.cur"), auto !important;
            transition: color 0.4s;
            &:hover {
              color: var(--a-button-hover-color);
            }
            div {
              transform: rotate(180deg);
              margin-right: 4px;
            }
          }
          .text-bottom-author {
            a {
              transition: color 0.4s;
              &:hover {
                color: var(--a-button-hover-color);
              }
            }
          }
        }
        .text-bottom-end {
          display: flex;
          flex: auto;
          max-width: 116px;
          padding-right: 4px;
          .text-bottom-end-box {
            margin-right: 8px;
            flex: auto;
            justify-content: space-between;
            display: flex;
            align-items: center;
            i {
              font-size: 22px;
            }
          }
        }
      }
    }
  }
}
</style>